@import "@/common/constants/StyleConst.scss";

.document-container {
  height: inherit;
  position: relative;

  .selection-text {
    position: absolute;
    top: -28px;
    right: 42px;
  }

  .theme--light.v-icon.v-icon.v-icon--disabled {
    color: #ffffff80 !important;
  }

  .form-info {
    height: inherit;

    ::v-deep .v-data-table__wrapper {
      height: inherit;

      .v-data-table-header {
        background-color: $color-theme-blue;
      }

      thead {
        tr {
          th {
            height: 40px;
            border-bottom: unset !important;
            background-color: $color-theme-blue;

            span {
              font-weight: 700;
              font-size: 12px;
              color: $color-text-white;
            }

            .v-input__control {
              .v-input__slot {
                .v-input--selection-controls__input {
                  .v-input--selection-controls__ripple {
                    border-radius: 50%;
                  }

                  span {
                    display: none;
                  }
                }
              }
            }
          }

          >:nth-child(1) {
            border-radius: 8px 0 0 0;

            .white-check {
              .mdi-checkbox-blank-outline::before {
                color: $color-bg-white;
              }
            }
          }

          >:nth-child(2) {
            padding-left: unset;

            .v-data-table-header__icon {
              margin-left: 16px;
              opacity: unset;
            }

            i::before {
              font-weight: 700;
              color: $color-text-white;
              font-size: 20px;
            }
          }

          :last-child {
            border-radius: 0 8px 0 0;
          }
        }

      }

      tbody {
        tr {
          td {
            height: 40px;
            border-bottom: unset !important;
            font-size: 12px;
            color: $color-theme-grey;

            .v-input__control {
              .v-input__slot {
                transition: unset;
              }
            }
          }

          >:nth-child(2) {
            padding-left: unset;
          }

          .action-icon {
            visibility: hidden;
          }

          .show-icon {
            visibility: visible;
            align-items: center
          }

          &:hover {
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);

            .action-icon {
              visibility: visible;
              align-items: center
            }
          }
        }
      }
    }
  }

  .file-container {
    .file-header {
      height: 40px;
      align-items: center;
      background-color: #626C84;
      display: flex;
      justify-content: space-between;
      padding: 0 16px;

      .arrow-icon::before {
        font-weight: 700;
        color: $color-text-white;
        font-size: 20px;
      }

      .field-name {
        color: $color-text-white;
        font-weight: 700;
        font-size: 12px;
      }
    }

    .file-content {
      display: flex;
      flex-wrap: wrap;

      .file-box {
        width: calc(8.3333333333333% - 8px);
        height: 80px;
        margin: 4px;
        display: flex;
        flex-direction: column;
        position: relative;

        .checkbox {
          position: absolute;
          margin: 0;
          padding: 0;
          top: 0;
          left: 0;
        }

        .file-icon {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;

          .folder-icon {
            font-size: 38px;
          }

          .other-icon {
            font-size: 38px;
          }
        }

        .file-name {
          text-align: center;
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
}

.delete-file {
  position: relative;

  .text {
    text-align: left;
    font-size: 14px;
    color: $color-theme-grey;
  }

  .icon {
    position: absolute;
    bottom: 18px;
    right: 18px;
    color: transparent;
  }
}